Ext.namespace('Ext.app.designer');

Ext.app.designer.MyCenterPanel = Ext.extend(Ext.Panel,{
	
	initComponent:function(){
		
		Ext.app.designer.threeSceneObjects = [];
		Ext.app.designer.threeObjects = [];
		Ext.app.designer.maxObjects = [];
		
		Ext.apply(this,{
			region:'center',
			layout:'fit',
			items:[{
				html:'<div id="sceneritor" style="background:#000;width:'+Ext.app.designer.centerPanelWidth+'px;height:'+Ext.app.designer.centerPanelHeight+'px;"></div>',
				listeners:{
					'afterrender':{
						fn:function(){
							this.startThreeCnavas();
						},scope:this
					}
				}
			}]
		});
		Ext.app.designer.MyCenterPanel.superclass.initComponent.apply(this);
	},
	
	startThreeCnavas : function(){
		this.initScene();
		Ext.app.threeAnimate();
	},
	
	initScene : function(){
		Ext.app.designer.scene=new THREE.Scene();
		
		Ext.app.designer.camera=new THREE.PerspectiveCamera(50,(Ext.app.designer.centerPanelWidth-20)/(Ext.app.designer.centerPanelHeight-20),1,100000);
		Ext.app.designer.camera.position.z = 100;
		
		Ext.app.designer.renderer = new THREE.WebGLRenderer();
		Ext.app.designer.renderer.setSize(Ext.app.designer.centerPanelWidth,Ext.app.designer.centerPanelHeight);
		
		Ext.app.designer.scene.add(Ext.app.designer.camera);
		
		var ele = $('#sceneritor');
		ele.append(Ext.app.designer.renderer.domElement);
		
		//Ext.app.designer.controls = new THREE.TrackballControls(Ext.app.designer.camera,Ext.app.designer.renderer.domElement);
		Ext.app.designer.controls = new THREE.OrbitControls(Ext.app.designer.camera,Ext.app.designer.renderer.domElement);
		
		//this.createScene();		
	},
	
	createScene : function(){
		
		//this.createCube(20,20,20,"#acc4d9");
		var room = new Ext.app.designer.room();
		this.addObjectTOScene(room.createRoom());

	},
	
	createCube : function(width, height, depth, color){
		color = color || "acc4d9";
		
		if(color.indexOf('#') != -1){
			color = color.substr(1);
		}
		
		var geometry = new THREE.CubeGeometry(width, height, depth);
        var material = new THREE.MeshBasicMaterial( { color: "0x" + color} );

        var mesh = new THREE.Mesh(geometry,material);
		
		this.addObjectTOScene(mesh);
	},
	
	addObjectTOScene : function(sceneObject){
		Ext.app.designer.scene.add(sceneObject);
	}
	
});


/*
*	three.js animate and rendered functions..
*	automatically calls iteratively..
*/
Ext.app.threeAnimate = function(){
	requestAnimationFrame(Ext.app.threeAnimate);
	Ext.app.threeRender();
};

Ext.app.threeRender = function(){
	Ext.app.designer.controls.update();
	Ext.app.designer.renderer.render(Ext.app.designer.scene,Ext.app.designer.camera);
};